<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="./后台管理.css">

    <!-- <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet"> -->
    <!-- <script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script> -->
</head>

<body>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>

    <script src="./后台管理.js"></script>
    <div class="wrap">
        <div class="lan">
            <div class="ha">
                <img src="https://img.alicdn.com/imgextra/i1/O1CN01pNPz0o1YXBwCkcG3R_!!6000000003068-2-tps-106-106.png"
                    width="53px" height="53px">
            </div>
            <div class="sss">
                <input type="text" class="cha" placeholder="请输出"><button class="sou" onclick="zhao()">搜索</button>
            </div>
            <div class="rwl">
                <div class="shou" onclick="sss()">首页</div>
                <div class="tj_i" onclick="ttt()">添加商品</div>
                <a href="./饼状图.html">饼状图</a>
                <a href="./点状图.html">点状图</a>
                <a href="./线.html">折线图</a>
                <a href="./柱状图.html">柱状图</a>

            </div>
        </div>
        <!-- 添加 -->
        <div class="tj">
            商品名称:<input type="text" class="ming" placeholder="请输入商品名称">
            商品库存:<input type="text" class="ku" placeholder="请输入商品库存">
            商品价格:<input type="text" class="jia" placeholder="请输入商品价格">
            商品状态:<input type="text" class="zhuang" placeholder="请输入商品状态">
            商品已售:<input type="text" class="yi" placeholder="请输入商品已售数量">
            商品图片链接:<input type="text" class="hu" placeholder="请输入商品图片链接">
            <button onclick="add()">添加商品</button>
        </div>
        <!-- 修改 -->
        <div class="gai">
            商品名称:<input type="text" class="gai_ming" placeholder="请输入商品名称">
            商品库存:<input type="text" class="gai_ku" placeholder="请输入商品库存">
            商品价格:<input type="text" class="gai_jia" placeholder="请输入商品价格">
            商品状态:<input type="text" class="gai_zhuang" placeholder="请输入商品状态">
            商品已售:<input type="text" class="gai_yi" placeholder="请输入商品已售数量">
            商品图片链接:<input type="text" class="gai_hu" placeholder="请输入商品图片链接">
            <button onclick="que()">确认修改</button>
        </div>
        <!-- <h1 class="ti">商品列表</h1> -->

        <div class="tb_div">
            <table border="1">
                <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名称</th>
                        <th>商品库存</th>
                        <th>商品价格</th>
                        <th>商品状态</th>
                        <th>已售</th>
                        <th>商品图片</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>

            </table>
        </div>
        <div class="fy"></div>
        <!-- 分页 -->
        <!-- 排序 -->
        <div class="px">
            <label>排序方式：</label>
            <select class="sort_ming">
                <option value="stock">库存</option>
                <option value="price">价格</option>
                <option value="sold">已售</option>
            </select>

            <label>排序顺序：</label>
            <select class="sort_shunxu">
                <option value="asc">升序</option>
                <option value="desc">降序</option>
            </select>
            <button class="sort-btn" onclick="pai()">排序</button>
        </div>
    </div>

</body>

</html>